<template>
  <v-col>
    <ArticleCard v-if="artList" :artList="artList"></ArticleCard>
    <div class="text-center">
      <Mpagination
        :key="mpagekey"
        color="indigo"
        :total-visible="queryParam.pagesize"
        v-model="queryParam.pagenum"
        :length="Math.ceil(total / queryParam.pagesize)"
      ></Mpagination>
    </div>
  </v-col>
</template>
<script>
import Mpagination from "../../components/Mpagination";
import ArticleCard from "../../components/ArticleCard";

export default {
  data() {
    return {
      artList: [],
      queryParam: {
        // pagesize: 5,
        // pagenum: 1
      },

      count: 0,
      total: 0,
      mpagekey: 1,
    };
  },
  created() {
    // console.log(this.queryParam.pagenum)
  },
  beforeRouteUpdate(to, from, next) {
    console.log(to.params.page);
    this.mpagekey++;
    this.queryParam.pagenum = Number(to.params.page);
    this.getArtList();
    console.log(Math.ceil(this.total / this.queryParam.pagesize));
    next();
  },

  components: { Mpagination, ArticleCard },
  async asyncData({ app, params, store }) {
    console.log(params.page);
    const asyncData = {};
    asyncData.queryParam = {};
    asyncData.queryParam.pagesize = 20;
    asyncData.queryParam.pagenum = Number(params.page)
      ? Number(params.page)
      : 1;

    asyncData.profileInfo = {};
    asyncData.profileInfo.id = 1;
    //getArtList
    const { data: res } = await app.$axios.get(`article`, {
      params: {
        pagesize: asyncData.queryParam.pagesize,
        pagenum: asyncData.queryParam.pagenum,
      },
    });

    asyncData.artList = res.data;
    asyncData.total = res.total;

    //导航栏
    const { data: res_cate } = await app.$axios.get("category");
    let cateList = res_cate.data;
    store.commit("add_cateList", cateList);

    //获取个人配置信息
    const { data: res_profileInfo } = await app.$axios.get(
      `profile/${asyncData.profileInfo.id}`
    );
    // this.$root.$emit('msg', res.data.icp_record)
    store.commit("save", res_profileInfo.data.icp_record);
    store.commit("save_profileInfo", res_profileInfo.data);

    //head
    app.head.title = "首页";

    // <meta name="keywords" content="js数组添加数据">
    // <meta name="description" content="js中对于数组的操作很常见，下面记录一下js向数组添加元素的方法。    let myArray=[11,22,33];    console.log(原数组：,myArray);    myArray.push(44,55);    console.log(用push在数组后面插入元素：,myArray);    myArray.unshift(66,77);    co..._js数组添加数据">
    // <meta name="csdn-baidu-search" content="{&quot;autorun&quot;:true,&quot;install&quot;:true,&quot;keyword&quot;:&quot;js数组添加数据&quot;}">

    function in_array(search, array) {
      for (var i in array) {
        if (array[i] == search) {
          return true;
        }
      }
      return false;
    }

    Array.prototype.contains = function contains(obj) {
      var i = this.length;
      let del_ids = [];
      while (i--) {
        if (in_array(this[i].name, obj)) {
          del_ids.push(i);
        }
      }
      return del_ids;
    };

    let del_metads = app.head.meta.contains([
      "lsblog-baidu-search",
      "keywords",
      "description",
    ]);

    del_metads.forEach((element) => {
      app.head.meta.splice(element, 1);
    });

    let linyu = Array();
    cateList.pop()
    cateList.forEach((item) => {
      linyu.push(item.name);
    });


    app.head.meta.push(
      {
        name: "lsblog-baidu-search",
        content: '{"autorun":true,"install":true,"keyword":"xx个人博客"}',
      },
      {
        // hid: "keywords",
        name: "keywords",
        content:
          "个人博客",
      },
      {
        // hid: "description",
        name: "description",
        content:
          "简介" +
          linyu.join("、") +
          "简介",
      }
    );
    return asyncData;
  },
  mounted() {
    // this.getArtList()
  },
  filters: {},
  methods: {
    // 获取文章列表
    async getArtList() {
      const { data: res } = await this.$http.get("article", {
        params: {
          pagesize: this.queryParam.pagesize,
          pagenum: this.queryParam.pagenum,
        },
      });
      this.artList = res.data;
      this.total = res.total;
    },
  },
};
</script>
<style lang=""></style>
<style >
.v-image__image--cover {
  background-size: contain;
  /* background-position: center center; */
}
</style>